<template>
    <div>
        <div class="calculator-area">
            <div class="container">
                <div class="calculator-wrapper">
                    <div class="row">
                        <div class="col-lg-6">
                            <h4>車貸計算器</h4>
                            <div class="calculator-form">
                                <el-form ref="form" :model="form" label-width="80px">
                                    <el-form-item label="裸車價格">
                                        <el-input type="number" v-model="form.price"></el-input>
                                    </el-form-item>
                                    <el-form-item label="首付比例" prop="resource">
                                        <el-radio-group v-model="form.proportion">
                                            <el-radio label="0">10%</el-radio>
                                            <el-radio label="1">20%</el-radio>
                                            <el-radio label="2">30%</el-radio>
                                            <el-radio label="3">40%</el-radio>
                                            <el-radio label="4">50%</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="還款方式" prop="resource">
                                        <el-radio-group v-model="form.type">
                                            <el-radio label="0">等額本息</el-radio>
                                            <el-radio label="1">等額本金</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="還款期限" prop="resource">
                                        <el-radio-group v-model="form.time">
                                            <el-radio label="0">1年</el-radio>
                                            <el-radio label="1">2年</el-radio>
                                            <el-radio label="2">3年</el-radio>
                                            <el-radio label="3">4年</el-radio>
                                            <el-radio label="4">5年</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="利率（%）">
                                        <el-input type="number" v-model="form.rate"></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <h4>計算結果</h4>
                            <div class="result-card">
                                <el-table :data="tableData" style="width: 100%">
                                    <el-table-column prop="loanTotal" label="貸款總額">
                                    </el-table-column>
                                    <el-table-column prop="month" label="月均還款">
                                    </el-table-column>
                                    <el-table-column prop="interest" label="支付利息">
                                    </el-table-column>
                                    <el-table-column prop="payTotal" label="還款總額">
                                    </el-table-column>
                                </el-table>
                            </div>
                            <button @click="calculator" type="submit" class="theme-btn car-item-check-button"><i
                                    class="far fa-credit-card"></i> 計算</button>
                        </div>
                    </div>
                </div>
                <div class="car-single-related mt-5">
                    <h3 class="mb-30">相關推薦</h3>
                    <div class="row">
                        <div class="col-md-6 col-lg-4 col-xl-3">
                            <div class="car-item wow fadeInUp" data-wow-delay=".25s">
                                <div class="car-img">
                                    <!-- <span class="car-status status-1">热卖</span> -->
                                    <img src="~/static/picture/01.jpg" alt="">
                                    <div class="car-btns">
                                        <a href="#"><i class="far fa-heart"></i></a>
                                    </div>
                                </div>
                                <div class="car-content">
                                    <div class="car-top">
                                        <h4><a href="#">Mercedes Benz Car</a></h4>
                                        <div class="car-rate">
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <span>5.0 (100 評價)</span>
                                        </div>
                                    </div>
                                    <ul class="car-list">
                                        <li><i class="far fa-steering-wheel"></i>MPV</li>
                                        <li><i class="far fa-road"></i>表顯里程8萬公里</li>
                                        <li><i class="far fa-car"></i>2022年上牌</li>
                                        <li><i class="far fa-gas-pump"></i>混合動力</li>
                                    </ul>
                                    <div class="car-footer">
                                        <span class="car-price car-price-custom">HK 45,620</span>
                                        <a href="/car-datail" class="theme-btn car-item-check-button">查看詳細車況</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4 col-xl-3">
                            <div class="car-item wow fadeInUp" data-wow-delay=".50s">
                                <div class="car-img">
                                    <img src="~/static/picture/02.jpg" alt="">
                                    <div class="car-btns">
                                        <a href="#"><i class="far fa-heart"></i></a>
                                    </div>
                                </div>
                                <div class="car-content">
                                    <div class="car-top">
                                        <h4><a href="#">Yellow Ferrari 458</a></h4>
                                        <div class="car-rate">
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <span>5.0 (100 評價)</span>
                                        </div>
                                    </div>
                                    <ul class="car-list">
                                        <li><i class="far fa-steering-wheel"></i>轎車</li>
                                        <li><i class="far fa-road"></i>表顯里程8萬公里</li>
                                        <li><i class="far fa-car"></i>2022年上牌</li>
                                        <li><i class="far fa-gas-pump"></i>混合動力</li>
                                    </ul>
                                    <div class="car-footer">
                                        <span class="car-price car-price-custom">HK 45,620</span>
                                        <a href="/car-datail" class="theme-btn car-item-check-button">查看詳細車況</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4 col-xl-3">
                            <div class="car-item wow fadeInUp" data-wow-delay=".75s">
                                <div class="car-img">
                                    <img src="~/static/picture/03.jpg" alt="">
                                    <div class="car-btns">
                                        <a href="#"><i class="far fa-heart"></i></a>
                                    </div>
                                </div>
                                <div class="car-content">
                                    <div class="car-top">
                                        <h4><a href="#">Black Audi Q7</a></h4>
                                        <div class="car-rate">
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <span>5.0 (100 評價)</span>
                                        </div>
                                    </div>
                                    <ul class="car-list">
                                        <li><i class="far fa-steering-wheel"></i>MPV</li>
                                        <li><i class="far fa-road"></i>表顯里程8萬公里</li>
                                        <li><i class="far fa-car"></i>2022年上牌</li>
                                        <li><i class="far fa-gas-pump"></i>混合動力</li>
                                    </ul>
                                    <div class="car-footer">
                                        <span class="car-price car-price-custom">HK 45,620</span>
                                        <a href="/car-datail" class="theme-btn car-item-check-button">查看詳細車況</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4 col-xl-3">
                            <div class="car-item wow fadeInUp" data-wow-delay="1s">
                                <div class="car-img">
                                    <span class="car-status status-2">特价</span>
                                    <img src="~/static/picture/04.jpg" alt="">
                                    <div class="car-btns">
                                        <a href="#"><i class="far fa-heart"></i></a>
                                    </div>
                                </div>
                                <div class="car-content">
                                    <div class="car-top">
                                        <h4><a href="#">BMW Sports Car</a></h4>
                                        <div class="car-rate">
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <span>5.0 (100 評價)</span>
                                        </div>
                                    </div>
                                    <ul class="car-list">
                                        <li><i class="far fa-steering-wheel"></i>MPV</li>
                                        <li><i class="far fa-road"></i>表顯里程8萬公里</li>
                                        <li><i class="far fa-car"></i>2022年上牌</li>
                                        <li><i class="far fa-gas-pump"></i>混合動力</li>
                                    </ul>
                                    <div class="car-footer">
                                        <span class="car-price car-price-custom">HK 45,620</span>
                                        <a href="/car-datail" class="theme-btn car-item-check-button">查看詳細車況</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'calculatorPage',
    layout: 'reception',
    data() {
        return {
            form: {
                price: null,
                proportion: null,
                type: null,
                time: null,
                rate: null,
            },
            tableData: []
        }
    },
    methods: {
        calculator() {
            // 表单验证
            if (!this.form.price) {
                this.$alert('請輸入裸車價格', '提示');
                return false;
            }
            if (this.form.proportion === null) {
                this.$alert('請選擇首付比例', '提示');
                return false;
            }
            if (this.form.type === null) {
                this.$alert('請選擇還款方式', '提示');
                return false;
            }
            if (this.form.time === null) {
                this.$alert('請選擇還款期限', '提示');
                return false;
            }
            if (!this.form.rate) {
                this.$alert('請輸入利率', '提示');
                return false;
            }

            // 参数处理
            const price = parseInt(this.form.price); // 裸车价格
            const rate = parseFloat(this.form.rate) / 100; // 年利率
            const year = [1, 2, 3, 4, 5][this.form.time]; // 还款年限
            const proportion = [0.1, 0.2, 0.3, 0.4, 0.5][this.form.proportion]; // 首付比例
            const type = parseInt(this.form.type); // 还款方式（等额本息/等额本金）

            const months = year * 12; // 总月数
            const loanTotal = Math.round(price * (1 - proportion)); // 贷款总额
            let totalInterest = 0; // 总利息
            let monthlyPayment = 0; // 月均还款
            let totalPay = 0; // 还款总额

            const tableData = []; // 存储每期数据

            // 等额本息计算
            if (type === 0) {
                const monthlyRate = rate / 12; // 月利率
                monthlyPayment = Math.round(
                    (loanTotal * monthlyRate * Math.pow(1 + monthlyRate, months)) /
                    (Math.pow(1 + monthlyRate, months) - 1)
                );

                let remainingLoan = loanTotal;
                for (let i = 1; i <= months; i++) {
                    const monthlyInterest = Math.round(remainingLoan * monthlyRate);
                    const monthlyPrincipal = Math.round(monthlyPayment - monthlyInterest);
                    totalInterest += monthlyInterest;
                    remainingLoan -= monthlyPrincipal;

                    tableData.push({
                        index: i,
                        monthlyInterest,
                        monthlyPrincipal,
                        monthlyPayment,
                        remainingLoan: Math.max(remainingLoan, 0)
                    });
                }

                totalPay = loanTotal + totalInterest;
            }
            // 等额本金计算
            else if (type === 1) {
                const monthlyPrincipal = Math.round(loanTotal / months); // 每月偿还本金
                let remainingLoan = loanTotal;

                for (let i = 1; i <= months; i++) {
                    const monthlyInterest = Math.round(remainingLoan * (rate / 12));
                    const monthlyPayment = monthlyPrincipal + monthlyInterest;
                    totalInterest += monthlyInterest;
                    remainingLoan -= monthlyPrincipal;

                    tableData.push({
                        index: i,
                        monthlyInterest,
                        monthlyPrincipal,
                        monthlyPayment,
                        remainingLoan: Math.max(remainingLoan, 0)
                    });
                }

                totalPay = loanTotal + totalInterest;
                monthlyPayment = Math.round(totalPay / months); // 平均月还款额
            }

            // 更新表格数据和结果展示
            this.tableData = [
                {
                    loanTotal, // 贷款总额
                    month: monthlyPayment, // 月均还款
                    interest: totalInterest, // 支付利息
                    payTotal: totalPay // 还款总额
                }
            ];
        }
    }
}
</script>